<section class="content--row">
  <header class="content__title">
    <h1>Tab</h1>
    <small>This template is built using <code>ngx-bootstrap/tabs</code> and provides some usage examples</small>
  </header>
  <div class="card">
    <div class="card-body">
      <h4 class="card-title">Static Tabs</h4>
      <tabset>
        <tab *ngFor="let tab of tabs" heading="{{tab.title}}">
          <p>{{tab.context}}</p>
        </tab>
      </tabset>
    </div>
  </div>
  <div class="card">
    <div class="card-body">
      <h4 class="card-title">Evenly distributed Tabs</h4>
      <h6 class="card-subtitle">Use the code
        <code>[justified]="true"</code> to achieve uniform allocation of Tabs</h6>
      <tabset [justified]="true">
        <tab *ngFor="let tab of tabs" heading="{{tab.title}}">
          <p>{{tab.context}}</p>
        </tab>
      </tabset>
    </div>
  </div>
  <div class="card">
    <div class="card-body">
      <h4 class="card-title">Theme Tabs</h4>
      <div class="row">
        <div class="col-md-12">
          <tabset *ngFor="let theme of themes" class="tab-container--{{theme}}">
            <tab *ngFor="let tab of tabs" heading="{{tab.title}}">
              <p>{{tab.context}}</p>
            </tab>
          </tabset>
        </div>
      </div>
    </div>
  </div>
</section>
